<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>喵嗒</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/admin.css"/>
    <style>
    	.layui-form{
      width: 330px;
      height: 140px;
      margin:0 auto;
    	}
    	.add-person th{
        width:120px;
        height:40px;
        margin-left:10px;
    		font-size:14px;
        padding: 0;
        vertical-align: middle;
    	}
    	.add-person input{
        outline:none;
    		width: 200px;
    		height: 28px;
    		border:1px solid #E5BA70;
    		border-radius:5px;
    	}
      .add-person .selected1{
        font-size: 12px;
      }
      .add-person td{
        position: relative;
      }
      .add-person td a.input{
        display:inline-block;
        overflow:hidden;
        width: 66px;
        height: 28px;
        line-height:28px;
        background-color: pink;
        position:absolute;
        top: 10px;
        right: 16px;
        border-radius: 0 5px 5px 0;
        color: #fff;
        text-align: center;
      }
      .add-person td .input input{
        width: 66px;
        height: 28px;
        background-color: blue;
        opacity:0;
        filter:alpha(opacity=0);
        font-size:100px;
        position:absolute;
        top:0;
        right:0;
      }
    	.layui-form .layui-table{
    		margin-top:50px;
    		margin:0 auto;
    	}
    #btn-cancel,#btn-send{
    	outline:none;
      width:88px;
      height:28px;
      border-radius:5px;
      background-color: #D8D8D8;
      border:0;
      margin-top:10px;
    }
    #btn-cancel{
       margin-left:128px;
    }
    #btn-send:hover,#btn-cancel:hover{
    	color:#fff;
     background-color:#EF7632;
    }
    #btn-send{
        margin-left:20px;
    }
    .layui-layer .layui-layer-title{
      background-color: #fff;
    }
    </style>
</head>
<body>
     <form class="layui-form" action="">
    	    <table class="layui-table layui-table-add" lay-skin="nob">
    		  <tbody>
    		   <tr class="add-person">
    		      <th>下载模板</th>
    		      <td><a href="#">点击此处下载模板</a></td>
    		    </tr>
    		    <tr class="add-person">
    		      <th>选择csv文件</th>
    		      <td>
                <input class="selected1" type="text" readonly="readonly" />
               <!-- <input type="file" name="file" class="layui-upload-file selected2" lay-title="选取"> -->
               <a href="javascript:void(0);" class="input"><input type="file" name="file" class="selected2">选取</a>
             </td>
    		    </tr>
    		  </tbody>

    		</table>
          <button id="btn-cancel">取消</button>
          <button id="btn-send">上传</button>
    	</form>
	<script type="text/javascript" src="../layui/layui.js"></script>
  <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
	<script>
  $(function(){
    $(".selected2").change(function(){  // 当 id 为 file 的对象发生变化时
        console.log(this.files[0]);
        console.log($(".selected2").val());
        $(".selected1").val(this.files[0].name);
        // var fileSize = this.files[0].size;
        // var size = fileSize / 1024 / 1024;
        // if (size > 5) {
        //     alert("附件不能大于5M,请将文件压缩后重新上传！");
        //     this.value="";
        //     return false;
        // }else{
        //     $(".selected1").val(this.files[0].name);  //将 #file 的值赋给 #file_name
        // }
    })
});
	</script>
</body>
</html>
